<template>
    <div class="map">
        <el-dialog :visible.sync="showMap" title="选择雪场定位" width="800">
            <div class="address">{{ addrContent.address }}</div>
            <div id="map-container"></div>

            <div class="search-con">
                <el-input placeholder="输入关键字搜索" id="input-map" v-model="mapSearch" />
                <ul>
                    <li v-for="(tip, index) in tips" :key="index" @click="selectAddr(tip.location)">
                        <p>{{ tip.name }}</p>
                        <p>{{ tip.district + tip.address }}</p>
                    </li>
                </ul>
            </div>
            <div slot="footer">
                <el-button type="default" @click="showMap = false">取消</el-button>
                <el-button type="primary" :loading="loading" @click="ok">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { getRegion } from "@/api/public.js";

const config = require('@/config/index')
export default {
    name: 'liliMap',
    data() {
        return {
            config,
            showMap: false, // modal显隐
            mapSearch: "", // 地图搜索
            map: null, // 初始化地图
            autoComplete: null, // 初始化搜索方法
            geocoder: null, // 初始化地理、坐标转化
            positionPicker: null, // 地图拖拽选点
            tips: [], //搜索关键字列表
            addrContent: {}, // 回显地址信息
            loading: false, // 加载状态
        };
    },
    watch: {
        mapSearch: function (val) {
            this.searchOfMap(val);
        },
    },
    methods: {
        ok() {
            // 确定选择
            this.loading = true;
            const params = {
                cityCode: this.addrContent.regeocode.addressComponent.citycode,
                adcode: this.addrContent.regeocode.addressComponent.adcode,
                townName: this.addrContent.regeocode.addressComponent.township,
                position: this.addrContent.regeocode.addressComponent.position
            };
            getRegion(params).then((res) => {
                console.log('res---------: ', res)
                if (res.code == 200) {
                    // this.addrContent.addr = res.data.name.replace(/,/g, " ");
                    this.addrContent.addr = res.data.name;
                    this.addrContent.addrId = res.data.id;
                    this.loading = false;
                    this.showMap = false;
                    this.$emit("getAddress", this.addrContent);
                    // console.log(this.addrContent)
                }
            });
        },
        // 初始化地图组件
        init() {
            AMapLoader.load({
                key: this.config.aMapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
                version: "", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: [
                    "AMap.ToolBar",
                    "AMap.Autocomplete",
                    "AMap.PlaceSearch",
                    "AMap.Geolocation",
                    "AMap.Geocoder",
                ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
                AMapUI: {
                    // 是否加载 AMapUI，缺省不加载
                    version: "1.1", // AMapUI 缺省 1.1
                    plugins: ["misc/PositionPicker"], // 需要加载的 AMapUI ui插件
                },
            }).then((AMap) => {
                let that = this;
                this.map = new AMap.Map("map-container", {
                    zoom: 12,
                });
                that.map.addControl(new AMap.ToolBar());
                that.map.addControl(new AMap.Autocomplete());
                that.map.addControl(new AMap.PlaceSearch());
                that.map.addControl(new AMap.Geocoder());

                // 实例化Autocomplete
                let autoOptions = {
                    city: "全国",
                };
                that.autoComplete = new AMap.Autocomplete(autoOptions); // 搜索
                that.geocoder = new AMap.Geocoder(autoOptions);

                that.positionPicker = new AMapUI.PositionPicker({
                    // 拖拽选点
                    mode: "dragMap",
                    map: that.map,
                });
                that.positionPicker.start();
                /**
                 *
                 * 所有回显数据，都在positionResult里面
                 * 需要字段可以查找
                 *
                 */
                that.positionPicker.on("success", function (positionResult) {
                    that.addrContent = positionResult;
                    console.log('positionResult----------: ', positionResult)
                });
            }).catch((e) => { });
        },
        searchOfMap(val) {
            // 地图搜索
            let that = this;
            this.autoComplete.search(val, function (status, result) {
                // 搜索成功时，result即是对应的匹配数据
                if (status == "complete" && result.info == "OK") {
                    that.tips = result.tips;
                } else {
                    that.tips = [];
                }
            });
        },
        selectAddr(location) {
            // 选择坐标
            if (!location) {
                this.$Message.warning("请选择正确点位");
                return false;
            }
            const lnglat = [location.lng, location.lat];
            this.positionPicker.start(lnglat);
        },
    },
    mounted() {
        // this.init();
    },
};
</script>
<style lang="scss" scoped>
#map-container {
    width: 500px;
    height: 400px;
}

.search-con {
    position: absolute;
    right: 20px;
    top: 64px;
    width: 260px;

    ul {
        width: 260px;
        height: 400px;
        overflow: scroll;

        li {
            padding: 5px;

            p:nth-child(2) {
                color: #999;
                font-size: 12px;
            }

            &:hover {
                background-color: #eee;
                cursor: pointer;
            }
        }
    }
}

.address {
    margin-bottom: 10px;
    // color: $theme_color;
    font-weight: bold;
}
</style>
